<script setup>
import {onMounted, ref} from "vue";
import {addTeacher, pageList, removeByTid, selectLog} from "@/api/teacher";
import {Delete, Edit, User} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import TeacherLogComponent from "@/components/Teacher/TeacherLogComponent.vue";
import AddTeacherComponent from "@/components/Teacher/AddTeacherComponent.vue";

onMounted(() => {
  getPage()
})
let pageData = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
  username: "",
  nickname: "",
  phone: "",
  typeId: ""
})

let getPage = () => {
  pageList(pageData.value).then(res => {
    list.value = res.data.list;
    pageData.value.total = parseInt(res.data.total)
  })
}
let list = ref();
let handleCurrentChange = (size) => {
  pageData.value.pageNum = size;
  getPage()
}
let handleSizeChange = (size) => {
  pageData.value.pageSize = size;
  getPage()
}
let removeById = (id) => {
  ElMessageBox.confirm(
      '确定删除吗',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        removeByTid(id).then(() => {
          ElMessage.success("删除成功！")
        })
        getPage()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}
let log = (id) => {
  console.log(id)
  selectLog(id).then(res => {
    listLog.value = res.data
    console.log(listLog.value)
  })
  visibleIsTrue()
}
let dialogTableVisible = ref(false)
let listLog = ref()
onMounted(() => {

})
let visibleIsTrue = () => {
  dialogTableVisible.value = true;
}
let saveVisible = ref(false)
let dataBody = ref({
  "username": "",
  "email": "",
  "name": "",
  "phone": "",
  "type": 1,
})
let saveTeacher = () => {
  addTeacher(dataBody.value).then(res => {
    ElMessage.success("添加成功!")
    saveVisible.value = false
    getPage()
  })
}
</script>

<template>
  <div>
    <div>
      <el-dialog v-model="dialogTableVisible" title="上课信息" width="500px">
        <el-table
            :data="listLog"
            width="100%">
          <el-table-column label="课名" prop="name"/>
          <el-table-column label="教室" prop="classRoomName"/>
          <el-table-column label="开始时间" prop="startTime"/>
          <el-table-column label="结束时间" prop="endTime"/>
        </el-table>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="saveVisible" title="添加讲师" width="500px">
        <el-row :gutter="20">
          <el-col>
            <el-input v-model="dataBody.username" placeholder="用户名"/>
          </el-col>
          <el-col style="margin-top: 5px">
            <el-input v-model="dataBody.email" placeholder="请输入邮箱"/>
          </el-col>
          <el-col style="margin-top: 5px">
            <el-input v-model="dataBody.name" placeholder="请输入名称"/>
          </el-col>
          <el-col style="margin-top: 5px">
            <el-input v-model="dataBody.phone" placeholder="请输入手机号"/>
          </el-col>
          <el-col style="margin-top: 5px">
            <select v-model="dataBody.type">
              <option value="1">普通讲师</option>
              <option value="2">超级讲师</option>
              <option value="3">金牌讲师</option>
            </select>
          </el-col>
        </el-row>
        <el-button style="margin-left: 360px;margin-top: 40px" type="primary" @click="saveTeacher">提交</el-button>
      </el-dialog>
    </div>
    <div style="margin-left: 20px">
      <h1>讲师管理</h1>
    </div>
    <!--    查询条件-->
    <div>
      <div style="height: 100px;margin-left: 20px">
        <el-row :gutter="10">
          <el-col span="2">
            <div style="width: 200px">
              <el-input
                  v-model="pageData.username"
                  :prefix-icon="User"
                  class="w-50 m-2"
                  placeholder="根据用户名查询"
                  size="large"

              />
            </div>
          </el-col>
          <el-col span="2">
            <div style="width: 200px">
              <el-input
                  v-model="pageData.phone"
                  :prefix-icon="User"
                  class="w-50 m-2"
                  placeholder="根据手机号查询"
                  size="large"
              />
            </div>
          </el-col>
          <el-col span="2">
            <div style="width: 200px">
              <el-input
                  v-model="pageData.nickname"
                  :prefix-icon="User"
                  class="w-50 m-2"
                  placeholder="根据昵称查询"
                  size="large"
              />
            </div>
          </el-col>
          <el-col span="2">
            <div>
              <el-button size="large" type="primary" @click="select">
                查询
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-bottom: 20px;margin-left: 20px">
        <el-button size="large" type="primary" @click="saveVisible=true">添加讲师</el-button>
      </div>
    </div>
    <div>
      <AddTeacherComponent/>
    </div>

    <!--    上课记录-->
    <div>
      <TeacherLogComponent/>
    </div>
    <!--    列表-->
    <div>
      <el-table
          :data="list"
          style="width: 100%"
          width="100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column :index="index=> index+1 " label="序号" type="index" width="60"/>
        <el-table-column label="昵称" prop="nickname" width="100"/>
        <el-table-column label="用户名" prop="username" width="100"/>
        <el-table-column label="手机号" prop="phone" width="100"/>
        <el-table-column #default="{row}" label="头像" width="100">
          <el-image :src=row.headUrl style="width: 100px; height: 100px"/>
        </el-table-column>
        <el-table-column label="级别" prop="typeName" width="100"/>
        <el-table-column #default="{row}" label="查询该讲师上课记录" width="120">
          <el-button size="small" type="primary" @click="log(row.id)">浅查一下</el-button>
        </el-table-column>
        <el-table-column #default="{row}" label="操作" width="100">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-button :icon="Edit" size="small" type="primary"/>
            </el-col>
            <el-col :span="10">
              <el-button :icon="Delete" size="small" type="danger" @click="removeById(row.id)"/>
            </el-col>
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div style="margin-left: 10px">
      <el-pagination
          v-model:current-page="pageData.pageNum"
          v-model:page-size="pageData.pageSize"
          :background="background"
          :total="pageData.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
